<template>
  <div class="baseInfo content">
    <Card :title="title" :isShowTitle="false">
      <a-spin :tip="$t('accountnew.loading')" :spinning="isLoading">
        <a-form-model
          ref="ruleForm"
          :rules="rules"
          :model="form"
          hideRequiredMark
          labelAlign="left"
          :colon="false"
          :label-col="{ span: 7 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-form-model-item prop="account" :label="$t('accountnew.account')">
            <a-tooltip>
              <template slot="title"
                >{{ $t('accountnew.accounttip') }}
              </template>
              <a-input v-model="form.account" />
            </a-tooltip>
          </a-form-model-item>
          <a-form-model-item prop="userName" :label="$t('accountnew.name')">
            <a-tooltip>
              <template slot="title">{{ $t('common.mustEnter') }}</template>
              <a-input v-model="form.userName" />
            </a-tooltip>
          </a-form-model-item>
          <a-form-model-item prop="address" :label="$t('accountnew.address')">
            <a-input v-model="form.address" />
          </a-form-model-item>
          <a-form-model-item prop="company" :label="$t('accountnew.company')">
            <a-tooltip>
              <template slot="title">{{
                $t('accountnew.companytip')
              }}</template>
              <a-input v-model="form.company" />
            </a-tooltip>
          </a-form-model-item>
          <a-form-model-item prop="title" :label="$t('accountnew.posit')">
            <a-select
              v-model="form.title"
              :placeholder="$t('accountnew.posittip')"
              mode="multiple"
              style="width: 100%"
            >
              <a-select-option value="boss">
                {{ $t('accountnew.boss') }}
              </a-select-option>
              <a-select-option value="saleman">
                {{ $t('accountnew.saleman') }}
              </a-select-option>
              <a-select-option value="presale">
                {{ $t('accountnew.presale') }}
              </a-select-option>
              <a-select-option value="aftersale">
                {{ $t('accountnew.aftersale') }}
              </a-select-option>
              <a-select-option value="research">
                {{ $t('accountnew.research') }}
              </a-select-option>
              <a-select-option value="other">
                {{ $t('accountnew.other') }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item
            :wrapper-col="{ span: 13, offset: 7 }"
            v-if="!isAADAccount"
          >
            <a-button type="primary" @click="onSubmit" block :disabled="load">
              {{ $t('common.save') }}
            </a-button>
          </a-form-model-item>
        </a-form-model>
      </a-spin>
    </Card>
  </div>
</template>

<script>
import { requestHttp, maccApi } from '@utils/index';
import { mapState } from 'vuex';
import Card from '../../components/Card.vue';
export default {
  name: 'BaseInfo',
  components: {
    Card,
  },
  data() {
    let checkUserName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error(this.$t('accountnew.userput')));
      } else if (value.length < 1 || value.length > 32) {
        callback(new Error(this.$t('accountnew.userlen')));
      } else {
        callback();
      }
    };
    return {
      title: this.$t('account.basic'),
      isLoading: false,
      load: false,
      form: {
        account: '',
        userName: '',
        address: '',
        company: '',
        title: '',
      },
      rules: {
        account: [
          {
            required: true,
            pattern: /^[A-Za-z]([\w@]){4,63}$/,
            min: 5,
            max: 64,
            message: this.$t('accountnew.accounttip'),
            trigger: 'blur',
          },
        ],
        userName: {
          required: true,
          validator: checkUserName,
          trigger: 'blur',
        },
        address: {
          message: this.$t('accountnew.addresslen'),
          min: 0,
          max: 32,
          trigger: 'blur',
        },
        company: {
          message: this.$t('accountnew.addresslen'),
          min: 0,
          max: 32,
          trigger: 'blur',
        },
      },
    };
  },
  computed: {
    ...mapState('User', ['tenantInfo', 'userInfo']),
    isAADAccount() {
      return this.userInfo.azureObjectId ? true : false;
    },
  },
  created() {
    this.loadUserInfo();
  },
  methods: {
    async loadUserInfo() {
      this.isLoading = true;
      var data = {
        api: maccApi.ACCOUNT_INFO,
        method: 'GET',
      };
      let res = await requestHttp(data);
      if (res && res.code == 0) {
        //TODO
        this.form = res;
        // 若职称为空字符串时转为空数组
        if (res.title === '') {
          this.form.title = [];
        } else {
          this.form.title = res.title.split(',');
        }
      }
      this.isLoading = false;
    },
    async onSubmit() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.load = true;
          const str = this.form.title.join(',');
          const params = {
            account: this.form.account,
            userName: this.form.userName,
            address: this.form.address,
            company: this.form.company,
            title: str,
          };
          var data = {
            api: maccApi.ACCOUNT_INFO,
            method: 'PUT',
            params: params,
          };
          let res = await requestHttp(data);
          if (res && res.code == 0) {
            //TODO
            console.log(res);
            this.$message.success(this.$t('accountnew.success'));
            this.loadUserInfo();
          } else {
            this.$message.error(res.msg || this.$t('accountnew.error'));
          }
          this.load = false;
        } else {
          this.$message.error(this.$t('accountnew.check'));
        }
      });
    },
  },
};
</script>

<style lang="less">
.content {
  /deep/.ant-form-item-label {
    font-weight: normal;
    color: @gray-8;
  }
}
</style>
